<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,ul{
				margin: 0;
				padding: 0;
				
			}
			.miopen-carousel-wrap{
				margin: 0 auto;
				width: 100%;
				overflow: hidden;
			}
			.carousel{
				/* margin-left: -1196px; */
				list-style: none;
				width: 100%;
				height: 480px;
				display: flex;
			}
			.carousel>li {
				width: 100%;
				height: 100%;
				flex-shrink: 0;
			}
			.carousel>.citem0 {
				background-image:url(../../img/open01.jpg) ;
				background-position: center;
				background-size: cover;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.carousel>.citem0>h2 {
				font-variant: tabular-nums;
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				font-size: 48px;
				font-weight: 400;
				color: #fff;
				text-align: center;
				line-height: 28px;
				margin-bottom: 40px;
				letter-spacing: 3px;
				text-shadow: 0 9px 7px rgba(0,0,0,.5);
			}
			.carousel>.citem0>p{
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				font-size: 18px;
				font-weight: 500;
				color: #fff;
				letter-spacing: 0;
				text-align: center;
				line-height: 28px;
				margin-bottom: 64px;
			}
			.carousel>.citem0>.carousel-link {
				display: flex;
				
			}
			.carousel>.citem0>.carousel-link>a{
				text-decoration: none;
				box-sizing: border-box;
				margin: 0;
				display: inline-block;
				font-weight: 400;
				box-shadow: 0 2px 0 rgba(0,0,0,.015);
				transition: all .3s cubic-bezier(.645,.045,.355,1);
				padding: 0 15px;
				width: 260px;
				height: 56px;
				font-size: 20px;
				color: #080044;
				text-align: center;
				line-height: 56px;
				background: #00eaff;
				margin-right: 30px;
			}
			.carousel>.citem0>.carousel-link>a:hover {
				color: #fff;
				background-color: #0087ff;
				box-shadow: 0 2px 6px 0 rgba(0,0,0,.5);
			}
			.miopen-carousel-wrap .pointer-box {
				width: 100px;
				height: 10px;
				position: absolute;
				top: 450px;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
			}
			.miopen-carousel-wrap .pointer{
				display: inline-block;
				width: 15px;
				height: 3px;
				background-color: #ccc;
				border-radius: 1px;
				cursor: pointer;
			}
			.pointer-active { 
				display: inline-block;
				width: 28px;
				height: 3px;
				background-color: #FFF;
				border-radius: 1px;
				cursor: pointer;
			}
			.carousel>.citem1 {
				background-image:url(../../img/open01.png) ;
				background-position: center;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="miopen-carousel-wrap">
			<ul class="carousel">
				<li class="citem0">
					<h2>小米小爱开放平台 - 用语音连接世界</h2>
					<p>水滴平台正式升级为小米小爱开放平台</p>
					<div class="carousel-link">
						<a href="#">技能开发平台</a>
						<a href="#">语音服务平台</a>
					</div>
				</li>
				<li class="citem1"></li>
				<li class="citem0" id="firstclone">
					<h2>小米小爱开放平台 - 用语音连接世界</h2>
					<p>水滴平台正式升级为小米小爱开放平台</p>
					<div class="carousel-link">
						<a href="#">技能开发平台</a>
						<a href="#">语音服务平台</a>
					</div>
				</li>
				
			</ul>
			<div class="pointer-box">
				<span class="pointer" ></span>
				<span class="pointer-active" ></span>
			</div>
		</div>
	<script >
		let wrap = document.querySelector('.miopen-carousel-wrap');
		let pointers = wrap.querySelectorAll('.pointer-box>span');
		let olis = wrap.querySelectorAll('.carousel>li')
		let oul = wrap.querySelector('.carousel');
		let timer_open = null; 
		let counter = 1;  //计数器
		let flag = false;
		let size = document.body.offsetWidth; //浏览器屏幕的宽度
		console.log(size);
		oul.style.transform = `translateX(${-size*counter}px)`;
		function clearclass (){ //清除小点的激活样式
			for (let i = 0; i < pointers.length; i++) {
				pointers[i].className='pointer'
				pointers[i].index = i;
			}
		}
		function auto() { //自动播放的方法
			counter++
			oul.style.transition = `all 1s`;
			oul.style.transform = `translateX(${-size*counter}px)`;
			if (!flag) {
				clearclass ();//清除激活样式
				pointers[0].className = 'pointer-active' //再单独给某一个设置激活样式
				flag = !flag //旗帜取反
			} else{
				clearclass ();
				pointers[1].className = 'pointer-active'
				flag = !flag //旗帜取反
			}
		}
		// 监听过渡完成事件,
			oul.addEventListener('transitionend',function(){
				console.log(counter);
				if (olis[counter].id == 'firstclone') {
					oul.style.transition = ``;//不让他产生过渡效果
					counter = 0
					oul.style.transform = `translateX(${-size*counter}px)`;//没有过渡的情况下，瞬间回位
				} else {
					counter =1
				}
				
			})
			
		
		function addtimer_open (){
			timer_open = setInterval(auto,3000)
		}
		function cleartimer_open (){
			clearInterval(timer_open)
		}
		
		pointers.forEach(function(item){ //item,这个参数指的就是数组中的每一个项
			item.addEventListener('click', function (){
				clearclass ()
				this.className = 'pointer-active' //为当前的按钮添加一个激活的类
				console.log(item.index);
				if (!item.index) {
					oul.style.transition = `all 1s`;
					oul.style.transform = `translateX(${-size}px)`;
				}else{
					oul.style.transition = `all 1s`;
					oul.style.transform = `translateX(0)`;
				}
			})
		})
		addtimer_open () //页面加载时候开始自动轮播
		wrap.addEventListener('mouseenter', cleartimer_open); //鼠标进入取消自动播放
		wrap.addEventListener('mouseleave', addtimer_open) //鼠标离开添加自动播放
	</script>
	</body>
</html>
